<template>
  <!--赵雄伟  入库单详情-->
  <div>
    <el-row>
      <el-col span="2" offset="22">
        <el-button type="primary">删除调拨单</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col span="2" offset="4">
        <font size="4">出库单号:</font>
      </el-col>
      <el-col span="3">
        <el-input v-model="input1" disabled=""></el-input>
      </el-col>
      <el-col span="2" offset="5">
        <font size="4"> 审核状态:</font>
      </el-col>
      <el-col span="3">
        <el-input v-model="input2" disabled=""></el-input>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col span="2" offset="4">
        <font size="4">调出门店：</font>
      </el-col>
      <el-col span="3">
        <el-select v-model="value" placeholder="请选择" disabled="true">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col span="2" offset="5">
        <font size="4" disabled="true">调出门店：</font>
      </el-col>
      <el-col span="3">
        <el-select v-model="value" placeholder="请选择" disabled="true">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <br/>
    <el-row>
      <el-col span="2" offset="4">
        <font size="4">经办人员:</font>
      </el-col>
      <el-col span="3">
        <el-input v-model="input3" disabled="true"></el-input>
      </el-col>
      <el-col span="2" offset="5">
        <font size="4"> 备注:</font>
      </el-col>
      <el-col span="3">
        <el-input v-model="input4" disabled="true"></el-input>
      </el-col>
    </el-row>
    <br/>
    <el-row>
      <el-col span="20" offset="2">
        <el-table
          :data="tableData"
          border
          show-summary
          style="width: 100%">
          <el-table-column
            prop="goodsId"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="goodsNum"
            label="编码">
          </el-table-column>
          <el-table-column
            prop="goodsName"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="goodsUnit"
            label="单位">
          </el-table-column>
          <el-table-column
            prop="goodsAmount"
            sortable
            label="调拨数量">
          </el-table-column>
          <el-table-column
            prop="goodsRemark"
            label="备注">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col span="2" offset="2">
        <font size="4">制单人员:</font>
      </el-col>
      <el-col span="2">
        <el-input v-model="input5" disabled="true"></el-input>
      </el-col>
      <el-col span="2" offset="1">
        <font size="4"> 制单日期:</font>
      </el-col>
      <el-col span="2">
        <el-input v-model="input6" disabled="true"></el-input>
      </el-col>
      <el-col span="2" offset="1">
        <font size="4">审核人员:</font>
      </el-col>
      <el-col span="2">
        <el-input v-model="input7" disabled="true"></el-input>
      </el-col>
      <el-col span="2" offset="1">
        <font size="4"> 审核日期:</font>
      </el-col>
      <el-col span="2">
        <el-input v-model="input8" disabled="true"></el-input>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col span="2" offset="2">
        <el-button size="max">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "DetailAllocation",
    data() {
      return {
        input1: '入库单号',
        input2:'待审核',
        input3:'小王',
        input4:'好活',
        input5:'Giao',
        input6:'2021-12-12',
        input7:'王姐',
        input8:'2021-12-13',
        options: [{
          value: '选项1',
          label: '北京店'
        }, {
          value: '选项2',
          label: '上海店'
        }, {
          value: '选项3',
          label: '深圳店'
        }, {
          value: '选项4',
          label: '贵州店'
        }, {
          value: '选项5',
          label: '成都店'
        }],
        options2: [{
          value: '选项1',
          label: '采购入库'
        }, {
          value: '选项2',
          label: '销售退货入库'
        }, {
          value: '选项3',
          label: '其他入库'
        }],
        value: '',
        tableData: [{
          goodsId: '1',
          goodsNum: 'GO123456588',
          goodsName: '小汉堡',
          goodsUnit: '个',
          goodsAmount: 100,
          goodsRemark: '老八直呼过瘾',
        }, {
          goodsId: '2',
          goodsNum: 'GO123456588',
          goodsName: '小汉堡',
          goodsUnit: '个',
          goodsAmount: 100,
          goodsRemark: '老八直呼过瘾',
        }, {
          goodsId: '3',
          goodsNum: 'GO123456588',
          goodsName: '小汉堡',
          goodsUnit: '个',
          goodsAmount: 100,
          goodsRemark: '老八直呼过瘾',
        }, {
          goodsId: '4',
          goodsNum: 'GO123456588',
          goodsName: '小汉堡',
          goodsUnit: '个',
          goodsAmount: 100,
          goodsRemark: '老八直呼过瘾',
        }, {
          goodsId: '5',
          goodsNum: 'GO123456588',
          goodsName: '小汉堡',
          goodsUnit: '个',
          goodsAmount: 100,
          goodsRemark: '老八直呼过瘾',
        }]
      }
    },
    methods: {
      handleClick() {
        alert('button click');
      },
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }
  }
</script>

<style scoped>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
